<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>eleTree</title>
  <link rel="stylesheet" href="https://unpkg.com/eletree/dist/css/icon.css" type="text/css">

  <style>
    .eleTree-group .eleTree-node .eleTree-title .eleTree-dropdown.eleTree-dropdown-code:not(.eleTree-dropdown-hide)::before,
    .eleTree-group .eleTree-node .eleTree-title .eleTree-dropdown.eleTree-dropdown-code:not(.eleTree-dropdown-hide)::after {
      content: "";
      width: 0 !important;
      height: 0 !important;
      background-color: transparent !important;
      position: absolute;
      left: 0px !important;
      top: -3px !important;
      transform-origin: right;
      transform: rotate(-90deg) !important;
      cursor: pointer;
      border-width: 5px;
      border-style: solid;
      border-color: #c0c4cc transparent transparent transparent;
    }

    .eleTree-group .eleTree-node .eleTree-title .eleTree-dropdown.eleTree-dropdown-code:not(.eleTree-dropdown-hide)::after {
      transform: rotate(-90deg) !important;
    }

    .eleTree-group .eleTree-node .eleTree-title .eleTree-checkbox.eleTree-checkbox-code.eleTree-checkbox-code_checked:not(.eleTree-checkbox-code_disabled),
    .eleTree-group .eleTree-node .eleTree-title .eleTree-checkbox.eleTree-checkbox-code.eleTree-checkbox-code_half {
      border-color: #409eff !important;
      background-color: #409eff !important;
    }

    .eleTree-line-vertical {
      top: -6px;
      height: calc(100% - 6px) !important;
    }

    .eleTree-line-horizontal {
      width: 17px !important;
    }
  </style>

  <style>
    .p {
      width: 50px;
    }

    .p:first-letter {
      color: red;
    }
  </style>
</head>

<body>
  <p class="p">
    阿斯顿发大发爱的反复发电房
  </p>
  <div class="eletree"></div>
  <script src="https://unpkg.com/eletree/dist/eleTree.js"></script>
</body>


<script>
  var data = [
    {
      "label": "安徽省",
      "id": "001",
      "isOpen": true,
      "children": [
        {
          "label": "淮北市",
          "id": "001001"
        },
        {
          "label": "马鞍山市",
          "id": "001002",
          "isOpen": true,
          "children": [
            {
              "label": "花山区",
              "id": "001002001",
              "isOpen": true,
              "children": [
                {
                  "label": "霍里街道",
                  "disabled": true,
                  "checked": true,
                  "id": "001002002001",
                  "radioDisabled": true
                },
                {
                  "label": "桃源路",
                  "id": "001002002002"
                },
                {
                  "label": "湖东路",
                  "checked": true,
                  "id": "001002002003",
                  "radioChecked": true
                }
              ]
            },
            {
              "label": "雨山区",
              "id": "001002002"
            },
            {
              "label": "和县",
              "id": "001002003"
            }
          ]
        },
        {
          "label": "合肥市",
          "id": "001003"
        }
      ]
    },
    {
      "label": "河南省",
      "id": "002",
      "children": [
        {
          "label": "郑州市",
          "id": "002001"
        },
        {
          "label": "开封市",
          "id": "002002"
        }
      ]
    },
    {
      "label": "江苏省",
      "id": "003",
      "children": [
        {
          "label": "苏州市",
          "id": "003001"
        },
        {
          "label": "南京市",
          "id": "003002"
        },
        {
          "label": "无锡市",
          "id": "003003"
        },
        {
          "label": "徐州市",
          "id": "003004"
        }
      ]
    }
  ]

  var ele = eleTree({
    el: '.eletree',
    data: data,
    showCheckbox: true,
    highlightCurrent: true,
    // showRadio: true,
    imgUrl: "https://unpkg.com/eletree/dist/images/",
    // icon: {
    //   fold: "fold.png",
    //   leaf: "leaf.png",
    //   checkFull: ".eletree_icon-check_full",
    //   checkHalf: ".eletree_icon-check_half",
    //   checkNone: ".eletree_icon-check_none",
    //   dropdownOff: ".eletree_icon-dropdown_right",
    //   dropdownOn: ".eletree_icon-dropdown_bottom",
    //   loading: ".eleTree-animate-rotate.eletree_icon-loading1",
    //   radioCheck: "radioCheck.png",
    //   radioCheckNone: "radioCheckNone.png",
    // }
  })
  ele.on('checkbox', function (data) {
    // console.log(this)
    console.log(data)
  })
  ele.on('radio', function (data) {
    // console.log(this)
    console.log(data)
  })
  ele.on('click', function (data) {
    // console.log(this)
    console.log(data)
  })
</script>

</html>